<template>
  <Provider>
    <div class="app-wrapper">
      <!--      <Header></Header>-->
      <main class="main-wrapper">
        <div class="play-btn" @click.stop="plays()">点击播放音乐</div>
        <router-view v-slot="{ Component, route }">
          <keep-alive>
            <component :is="Component" :key="route.path" />
          </keep-alive>
        </router-view>
      </main>
      <!--      <Tool></Tool>-->
      <!--      搜索弹框-->
      <Search></Search>
      <Plan></Plan>
      <!-- 波浪 -->
      <Waves></Waves>
      <!--      <Login></Login>-->
      <!--      <Register></Register>-->
      <!--            <Forget></Forget>-->
      <!--      <Email></Email>-->
      <Drawer></Drawer>
      <audio autoplay id="audio" :src="songs" ref="audio" loop />
      <!-- <MusicPlayer></MusicPlayer> -->
      <!--            <ChatRoom></ChatRoom>-->
      <Footer></Footer>
    </div>
  </Provider>
</template>

<script setup lang="ts">
import { getBlogInfo } from "@/api/blogInfo";
import useStore from "@/store";
import Plan from "@/components/Dialog/Plan.vue";
import { getSongs } from "@/api/blogInfo/index";

const { blog } = useStore();
onMounted(() => {
  console.log(
    "%c Hello World %c By 阿冬 %c",
    "background:#e9546b ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff; padding:5px 0;",
    "background:#ec8c69 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #000; padding:5px 0;",
    "background:transparent"
  );
  getBlogInfo().then((data) => {
    console.log(data.data.data);
    blog.setBlogInfo(data.data.data);
  });
  // report();
  goGetSongs();
});
const songs = ref();
const audio = ref();
const plays = () => {
  if (audio.value) {
    audio.value.play();
  }
};
const goGetSongs = async () => {
  try {
    const res = await getSongs();

    if (res.status == 200) {
      songs.value =
        "http://yhl.zone" +
        decodeURIComponent(escape(atob(res.data.data.content)));
    }
  } catch (error) {
    throw error;
  }
};
</script>

<style scoped>
.app-wrapper {
  position: relative;
  min-height: 100vh;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 0 8rem;
}
</style>
